<html>

<head>
    <title>VHS de HLS</title>
    <script src="./hls.js"></script>
    <style>
        *{
            box-sizing: border-box;
        }
        html,body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            /* background-color: black; */
            text-align: center;
        }
        .title{
            font-size: 40px;
            text-align: center;
            font-weight: 800;
            margin: 40px auto;
        }
        .link{
            font-size: 30px;
            text-align: center;
            margin: 40px auto;
        }
        #video{
            width: 1000px;
            height: 600px;
            background-color: black;
        }

        #controller{
            position: absolute;
            z-index: 100;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
        }

        #controller .btn{
            color: #ffffff;
            font-size: 16px;
            height: 40px;
            line-height: 40px;
            width: 100px;
            text-align: center;
            border-radius: 8px;
            background-color: rgb(15, 47, 81);
            margin: 0 10px;
            cursor: pointer;
        }


    </style>
</head>

<body>
    <div class="title">web组件加载html使用hls插件播放视频</div>
    <div class="link">hls视频地址:http://220.161.87.62:8800/hls/0/index.m3u8</div>
    <div class="link">hls插件下载链接:https://cdn.jsdelivr.net/npm/hls.js@latest</div>
    <video id="video"></video>
    <div id="controller" style="visibility: hidden;">
        <div id="play" class="btn" autofocus="autofocus" onclick="play()">播放</div>
    </div>

    <script>
        let playing = false;
        let prepared = false;
        var video = document.getElementById('video');
        var playBtn = document.getElementById('play');
        var controller = document.getElementById('controller');
        var hls = null;

        if (Hls.isSupported()) {
            hls = new Hls();

            hls.loadSource('http://220.161.87.62:8800/hls/0/index.m3u8');

            //hls.loadSource('https://hw-vod.cdn.huya.com/leaf/1048585/1199566795719/56084359/7765140_1cfe0e9019855969b7b9c34bcc9f029a_264_720_1.m3u8?hyvid=867019163&hyauid=1503392699&hyroomid=1503392699&hyratio=1300&hyscence=vod&appid=66&domainid=25&srckey=NjZfMjVfODY3MDE5MTYz&bitrate=1392&client=106&definition=1300&pid=1503392699&scene=vod&vid=867019163&u=0&t=100&sv=2305111121&dMod=mseh-185')
            
            //hls.loadSource('http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8');

            //hls.loadSource('https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8');

            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                prepared = true;
                controller.style.visibility = "visible"
            });
        }

        function play(){
            if(!hls || !prepared){
                return 'not ready';
            }
            if(!playing){
                video.play();
                playing = true;
                playBtn.innerHTML = "暂停"
                return 'play action'
            }else{
                video.pause();
                playing = false;
                playBtn.innerHTML = "播放"
                return 'pause action'
            }
        }

        function sendUrl(){
            console.log('0xc00 html sendUrl() IN');
            return 'http://220.161.87.62:8800/hls/0/index.m3u8';
        }

        // playBtn.focus();

    </script>
    <script>
        // http://117.78.51.109:8080/HLS/facebook_720P_3M_H265/index.m3u8
        // http://117.78.51.109:8080/HLS/facebook_1080P_5M_H265/
        // http://117.78.51.109:8080/HLS/facebook_4K_20M_H265/
        // http://117.78.51.109:8080/HLS/facebook_4K_15M_H265/
    </script>
</body>

</html>